<template>
	<div class="ymsc-20180416">
		<header class="head">
			<img src="~@/assets/imgs/20180416/ymsc_head.jpg" class="img-auto" />
		</header>
		<aside class="get-ticket">
			<button class="" @click="getTicket" ref="getBtn"></button>
		</aside>
		<main class="overflow-h">
			<section class="bmdp overflow-h">
				<h1 class="ymsc-tit" style="margin-top: 0"><img src="~@/assets/imgs/20180416/must_buy_tit.png" style="width: 3.65rem"/></h1>
				<ul>
					<li v-for="item in mustBuyData">
						<div class="l">
							<img :src="item.url" class="img-auto" />
						</div>
						<div class="r">
							<h2 class="ecs ecs-2">{{item.title}}</h2>
							<mark class="tip">活动价</mark>
							<div class="buy">
								<span class="money">
									<sub>￥</sub><sup>{{item.activePrice}}</sup>
								</span>
								<button class="go" @click="goActivityGoods(item.id)">立即购买</button>
							</div>
						</div>
					</li>
				</ul>
			</section>
			<section class="bkkh overflow-h global-list">
				<h1 class="ymsc-tit"><img src="~@/assets/imgs/20180416/ymsc_bkkh_tit.png" style="width: 3.39rem"/></h1>
				<list-item :list-data="listData1"></list-item>
			</section>
			<section class="xlcz overflow-h global-list">
				<h1 class="ymsc-tit"><img src="~@/assets/imgs/20180416/ymsc_xlcz_tit.png" style="width: 3.39rem"/></h1>
				<list-item :list-data="listData2"></list-item>
			</section>
			<section class="gnjh overflow-h global-list">
				<h1 class="ymsc-tit"><img src="~@/assets/imgs/20180416/ymsc_gnjh_tit.png" style="width: 3.39rem"/></h1>
				<list-item :list-data="listData3"></list-item>
			</section>
		</main>
		<go-home></go-home>
	</div>
</template>
<script>
	import ListItem from './listItem';
	import GoHome from '@/components/goHome';
	import Utils from '@/util/util';
	import Api from '@/util/api';
	export default {
		name: 'activity20180416',
		components: {
			'list-item': ListItem,
			'go-home': GoHome
		},
		created() {
			let self = this;
			document.title = '一抹色彩，为你带来惊艳改变。全场商品199减10';
			this.otoData = this.__proto__.__proto__.dataBind;
			console.log(this.$route.query)
			if(this.$route.query && JSON.stringify(this.$route.query) != '{}') {
				//if(this.$route.query['t'].split("=")[1]) this.token = this.$route.query['t'].split("=")[1];
				this.token = this.$route.query['token']
			}
			window.loginCallBack = (token) => {
				self.token = token;
				token && self.isGetTicket();
			}

		},
		mounted() {
			this.isGetTicket();
		},
		data() {
			return {
				token: '',
				mustBuyData: [{
						id: '2123',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_8661458336321679356_1516000289686.jpg',
						title: '迪奥/DIOR 克丽丝汀魅惑润唇膏 SPF10粉色001#  3.5g',
						activePrice: '169'
					},
					{
						id: '4729',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_376591209162055111_1520489352621.jpg',
						title: '德国芭乐雅(Balea)玻尿酸安瓶浓缩精华 1ml*7支 12399',
						activePrice: '118'
					},
					{
						id: '4045',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_1593153380517322420_1520232163188.jpg',
						title: '[2支装]日本Kiss Me 梦幻泪眼极细液体眼线笔 防水不晕染 黑色',
						activePrice: '144'
					},
					{
						id: '4463',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_4083965912950105754_1520402536322.jpg',
						title: '(2盒)泰国Mistine花漾印章腮红3g 嫩裸妆修容防水持久不脱妆(2号橘色）*2 15974',
						activePrice: '79'
					},
					{
						id: '4839',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_1093247960611461086_1520498273304.jpg',
						title: 'Givenchy/纪梵希 高级定制小羊皮唇膏 #315号姨妈色 3.4g 10690',
						activePrice: '258'
					},
					{
						id: '3113',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_5566013599494764060_1519890934069.jpg',
						title: '韩国SULWHASOO/雪花秀 润致焕活肌底精华露 60ml 5174',
						activePrice: '398'
					}
				],
				listData1: [{
						id: '4545',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_9196272017479500861_1520412435838.jpg',
						title: 'bourjois/妙巴黎天鹅绒唇釉',
						activePrice: '64'
					},
					{
						id: '4503',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_7416022811872513157_1520408310892.jpg',
						title: '[2支装]美国Revlon露华浓丽彩炫亮口红',
						activePrice: '84'
					},
					{
						id: '4870',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_8641600578347774437_1520502201672.jpg',
						title: 'MAC/魅可 子弹头口红 #see sheer西柚浅橘粉 3g 8626',
						activePrice: '148'
					},
					{
						id: '4850',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_4283673891425546068_1520500656915.jpg',
						title: 'Guerlain/娇兰 小黑裙唇膏 #003美哭水红色 2.8g 8017',
						activePrice: '178'
					},
					{
						id: '4853',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_7823436259673655442_1520500868922.jpg',
						title: '纪梵希 禁忌之吻 Givenchy RIV 口红#05冷艳粉 8487',
						activePrice: '208'
					},
					{
						id: '3166',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_7859171153620095059_1519893814072.jpg',
						title: '迪奥Dior魅惑粉漾润唇膏3.5g 005 紫丁香 15575',
						activePrice: '218'
					},
					{
						id: '4803',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_5057521529529820323_1520495485935.jpg',
						title: 'ARMANI阿玛尼唇釉红管丝绒哑光液体唇彩',
						activePrice: '238'
					},
					{
						id: '4829',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_3045196302302001496_1520497681596.jpg',
						title: '法国YSL圣罗兰 迷魅圆管口红 #41 8659',
						activePrice: '278'
					},
					{
						id: '2947',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_1906741310585249546_1519876114099.jpg',
						title: 'Armani阿玛尼 持色迷情口红 4.2g No.400 7219',
						activePrice: '288'
					},
					{
						id: '4827',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_6667953656024024416_1520497568120.jpg',
						title: '法国Chanel/香奈儿炫亮魅力丝绒唇膏口红持久 #43 8658',
						activePrice: '288'
					},
					{
						id: '4818',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_2857060666425758177_1520497050544.jpg',
						title: 'TOM FORD 唇膏口红TF黑金黑管01#spanish pink 显色滋润遮盖力强 11895',
						activePrice: '328'
					},
					{
						id: '3279',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_2050950989561102647_1519900952906.jpg',
						title: 'CPB/肌肤之钥 细管唇膏 唇芯加唇壳 12118',
						activePrice: '338'
					}
				],
				listData2: [{
						id: '3072',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_5343422472683007090_1519887814435.jpg',
						title: '韩国直邮爱丽小屋 染眉膏1号 棕色 14864',
						activePrice: '54'
					},
					{
						id: '4036',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_5679053623799112449_1520230630112.jpg',
						title: '日本KOJI/蔻吉 白色珠光卧蚕泪/眼袋笔 11655',
						activePrice: '58'
					},
					{
						id: '3315',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_1242895694937598783_1519954505159.jpg',
						title: '美国 MAC/魅可 浅棕色眼影粉 tan 浅棕色2.5g 15855',
						activePrice: '69'
					},
					{
						id: '3809',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_8275894782128603478_1520150134236.jpg',
						title: 'KATE/凯朵 自然眉色染眉膏 BR-2 14985',
						activePrice: '69'
					},
					{
						id: '2612',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_5104544689047583786_1519788677482.jpg',
						title: '日本井田Canmake花瓣五色腮红 珠光6# 25g',
						activePrice: '88'
					},
					{
						id: '4039',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_9061167874059924110_1520231352640.jpg',
						title: '日本Kiss Me奇士美/花漾美姬纤细防泪眼线笔 防水防晕0.4ML（棕色） 3197',
						activePrice: '78'
					},
					{
						id: '4576',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_5616870537766844286_1520415045073.jpg',
						title: '【2盒】美国 BEAUTY TREATS Modern Matte12色眼影盘哑光金属大地色眼影',
						activePrice: '84'
					},
					{
						id: '3796',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_4760684348217760563_1520149317237.jpg',
						title: '韩国3ce Red Recipe 生机可爱红色经典系列腮红 #purity red 10g（有细闪，适合暖皮红色） 13919',
						activePrice: '88'
					},
					{
						id: '3440',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_7549970827437038033_1519972249443.jpg',
						title: 'LANCOME/兰蔻 梦魅巨星璀璨睫毛膏 01 NOIR MIDNIGHT 6.5ml 16220',
						activePrice: '168'
					},
					{
						id: '4516',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_2691953594523809830_1520410522869.jpg',
						title: '法国HR/赫莲娜 蛇纹睫毛膏 7.2ml 14239',
						activePrice: '189'
					},
					{
						id: '3538',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_4070202639829608121_1519976922807.jpg',
						title: 'Estee Lauder雅诗兰黛凝彩眼线液 3ml(黑色) 2299',
						activePrice: '238'
					},
					{
						id: '3458',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_5838696457516748147_1519973154454.jpg',
						title: '兰蔻广角羽扇防晕染睫毛膏 15802',
						activePrice: '238'
					},
				],
				listData3: [{
						id: '4489',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_2043280786729691041_1520407309428.jpg',
						title: '[2盒装]韩国cosmetea小灯泡安瓶精华小怪兽秋冬补水保湿精华液10支/盒 15416',
						activePrice: '168'
					},
					{
						id: '3299',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_1095235162301218530_1519903621136.jpg',
						title: '韩国直邮A.H.C B5玻尿酸保湿精华原液 50ml 16282',
						activePrice: '188'
					},
					{
						id: '4590',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_321890358043215694_1520471247953.jpg',
						title: '[3支装]EAORON 水光针 涂抹式水光针玻尿酸胶原蛋白精华液 补水保湿 全新3代升级版 10ml 14692',
						activePrice: '228'
					},
					{
						id: '3956',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_9067287788711408915_1520218208725.jpg',
						title: 'SK-II 净白清莹露精华露 150ml 14873',
						activePrice: '368'
					},
					{
						id: '3635',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_2491917469426928933_1519984836761.jpg',
						title: "Kiehl's/科颜氏 集焕白淡斑精华液 50ml 14435",
						activePrice: '488'
					},
					{
						id: '3549',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_4439199394589031444_1519977478256.jpg',
						title: '韩国Whoo后 秘贴精华50ml 15681',
						activePrice: '538'
					},
					{
						id: '4773',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_5348888557438073772_1520492946491.jpg',
						title: 'Estée Lauder 雅诗兰黛 特润修护肌透精华露(第六代小棕瓶)50ml 15078',
						activePrice: '548'
					},
					{
						id: '3674',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_6929265921069785894_1520133320228.jpg',
						title: 'POLA/宝丽 红BA碧艾臻红抗老保湿精华乳液 80ml 16212',
						activePrice: '638'
					},
					{
						id: '3973',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_8905043095467349223_1520219192459.jpg',
						title: 'SK-II 神仙水 护肤精华露 230ml 6739',
						activePrice: '894'
					},
					{
						id: '3428',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_3771351969794310133_1519971621104.jpg',
						title: '兰蔻/LANCOME 小黑瓶 精华肌底液 100ml 8023',
						activePrice: '938'
					},
					{
						id: '3901',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_4233364785408449249_1520155670037.jpg',
						title: 'CELES Placentary Cosmetic 雪莱丝胎盘精华30ml 15714',
						activePrice: '1488'
					},
					{
						id: '3488',
						url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_1755460350918997661_1519975127375.jpg',
						title: '美国LA MER/海蓝之谜 THE REGENERATING SERUM 活颜焕肤精华露 抗衰老 30ml 16214',
						activePrice: '1858'
					},
				],
				flag: false
			}
		},
		methods: {
			isGetTicket(fromBtn, callback) {
				let token = sessionStorage.getItem("plus_token") || Utils.getQueryString("token") || this.token,
					self = this;
				if(token && token != 'null') {
					const res = this.post(Api.validateNewUserByActivity, {
						activeId: self.otoData.activeId
					}, {
						token
					});
					res.then(res => {
						//初次加载时判断是否领取
						if(res.data.validateGrabedCoupon && !fromBtn) {
							this.$refs.getBtn.className = 'has';
							this.$refs.getBtn.disabled = true;
							return;
						}

						//如果是来自按钮触发
						fromBtn && callback();
					})
				}
			},
			getTicket() {
				let dom = this.$refs.getBtn,
					token = sessionStorage.getItem("plus_token") || Utils.getQueryString("token") || this.token,
					self = this;

				if(!token || token == 'null') {

					if(Utils.isNativeApp() || Utils.isWxPlus()) {
						token = Utils.getUserToken();
						this.token = token;
					}

					if(Utils.isWxPlus() && !token || token == 'null') {
						token = sessionStorage.getItem("plus_token") || Utils.getQueryString("token");
					}

					if(!token || token == 'null') {
						window.parent.postMessage({
							type: 'login',
							callback: 'http://192.168.1.113:8080/#/ymscJygb?isDebug=true'
						}, '*');
						return;
					}
				}

				this.isGetTicket(true, () => {
					dom.setAttribute('disabled', 'disabled');
					this.$vux.loading.show();
					const res = this.post(Api.couponGrabCoupons, {
						activeId: self.otoData.activeId
					}, {
						token
					});
					res.then(data => {
						if(data.code == '200') {
							dom.className = 'has';
							this.$vux.toast.text('领券成功!', 'middle');
						} else {
							if(data.message == "非常抱歉，您已经在该活动中领取了优惠券，不能重复领取！") {
								dom.className = 'has';
							} else {
								dom.removeAttribute('disabled');
							}
							if(data.code !== 1011) {
								this.$vux.toast.text(data.message, 'middle');
							}
						}
						this.$vux.loading.hide();

					}).catch(function(error) { //加上catch
						console.log(error);
					})
				});
			},
			goActivityGoods: function(goodsId) {
				let self = this;
				if(this.flag) return;
				this.flag = true;
				Utils.goGoods(goodsId);
				setTimeout(() => {
					self.flag = false
				}, 1000);
			}
		}
	}
</script>
<style lang='less'>
	@import '~@/assets/less/main.less';
	.ymsc-20180416 {
		background-color: #ff81a1;
		padding-bottom: .3rem;
		-webkit-tap-highlight-color: transparent;
		.get-ticket {
			width: 7.46rem;
			height: 2.6rem;
			background: url("~@/assets/imgs/20180416/get_ticket_bg.png") no-repeat;
			background-size: 100% auto;
			position: relative;
			button {
				width: 1.96rem;
				height: .8rem;
				background-image: url("~@/assets/imgs/20180416/ymsc_get_ticket.png");
				background-repeat: no-repeat;
				background-size: 100% auto;
				position: absolute;
				right: .32rem;
				bottom: .65rem;
				outline: none;
				border: none;
				background-color: transparent;
				&.has {
					background-image: url("~@/assets/imgs/20180416/ymsc_already_ticket.png");
				}
			}
		}
		.ymsc-tit {
			text-align: center;
			margin: .3rem 0 .2rem;
		}
		.bmdp {
			width: 7.15rem;
			margin: 0 auto;
			ul {
				li {
					height: 2.6rem;
					margin-bottom: .13rem;
					overflow: hidden;
					border-radius: .1rem;
					.l,
					.r {
						height: 100%;
						background-color: #fff;
						padding-bottom: .1rem;
					}
					.l {
						width: 2.5rem;
						float: left;
						img {
							border-top-left-radius: .1rem;
							border-bottom-left-radius: .1rem;
						}
					}
					.r {
						width: 4.23rem;
						padding-left: .2rem;
						padding-right: .2rem;
						float: right;
						border-top-right-radius: .1rem;
						border-bottom-right-radius: .1rem;
						h2 {
							font-size: .3rem;
							margin-bottom: 0;
						}
						mark.tip {
							background: none;
							display: block;
							font-size: .26rem;
							color: #ff934b;
							margin-top: .1rem;
						}
						.buy {
							margin-top: .1rem;
							overflow: hidden;
							.money {
								margin-top: .2rem;
								display: inline-block;
								sub,
								sup {
									color: #ff4b71;
								}
								sub {
									font-size: .38rem;
									line-height: .38rem;
								}
								sup {
									font-size: .48rem;
									line-height: .48rem;
									vertical-align: bottom;
								}
							}
							button.go {
								font-size: .3rem;
								color: #fff;
								width: 1.8rem;
								height: .65rem;
								border-radius: .1rem;
								background: #ff4b71;
								float: right;
							}
						}
					}
				}
			}
		}
		.global-list {
			width: 7.15rem;
			margin: 0 auto;
		}
	}
</style>